<template>
    <van-list
        class="video-list"
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="getList"
        >
        <div 
            v-for="item in list" 
            :key="item.ID" 
            @click="toDetail(item)"
            class="video-item">
            <div class="video-item-img">
                <img src="../../../assets/imgs/pay_card.png" alt="" srcset="">
            </div>
            <div class="video-item-content">
                <div>{{item.TA_TITLE}}</div>
                <p>{{item.TA_DESCRIBE}}</p>
            </div>
            <div class="video-item-arrow">
                <van-icon name="arrow" />
            </div>
        </div>
    </van-list>
</template>
<script>
import request from '../request.js'

export default {
    name:'video-detail',
    data(){
        return {
            detail:{},
            list:[],
            loading:false,
            finished:false,
            error:false
        }
    },
    methods:{
        async getList(){
            this.loading = true
            let res = await request('/myehr/teachvedio/searchobject.action')
            console.log(res);
            this.list = res.data
            this.finished = true
            this.loading = false;
        },
        toDetail(row){
            this.$router.push(`/videoDetail/${row.ID}`)
        }
    }
}
</script>
<style lang="less" scoped>
.video-list{
    background-color: #dcdcdc;

    .video-item{
        display: flex;
        align-items: center;
        background-color: white;
        margin-bottom: 10px;
        transition: .3s;
        &:active{
            background-color: #eeeeee;
        }
        &-img{
            width: 120px;
            height: 100px;
            display: flex;
            padding: 10px;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            img{
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
            }
        }
        &-content{
            flex: 1;
        }
        &-arrow{
            width: 20px;
            text-align: center;
        }
    }
}
</style>
